<template>
  <div class="top">
    <div class="center">
      <div class="inp">
        <div class="inp_img1">
          <svg
            t="1667306140609"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4466"
            width="16"
            height="16"
          >
            <path
              d="M143.4 405.31c33.22-106.06 214-206 376-196s354 64 390 288-152 504.63-383 509.88c-227.97 5.17-497-237.88-383-601.88z"
              fill="#E8E8E8"
              p-id="4467"
            ></path>
            <path
              d="M149.9 376.47c16.54-52.8 163.49-163.49 355.48-165 219-1.71 343.94 107.35 362 219.83 36 224-152 504.63-383 509.88C256.43 946.36 35.9 740.47 149.9 376.47z"
              fill="#FFFFFF"
              p-id="4468"
            ></path>
            <path
              d="M149.9 376.47c16.54-52.8 163.49-163.49 355.48-165 219-1.71 343.94 107.35 362 219.83 36 224-152 504.63-383 509.88C256.43 946.36 35.9 740.47 149.9 376.47z"
              fill="#FFFFFF"
              p-id="4469"
            ></path>
            <path
              d="M538.52 216S498 483 592.44 651C662.68 776 811 835.31 811 835.31s231.82-295.53 10-518C717 213 538.52 216 538.52 216zM485.48 216S526 483 431.56 651C361.32 776 213 835.31 213 835.31s-231.82-295.53-10-518C307 213 485.48 216 485.48 216z"
              fill="#FFBD7B"
              p-id="4470"
            ></path>
            <path
              d="M656.87 223.48S724.37 123 781.37 81s135-63 135-63 73.5 52.5 72 154.49-24 136.49-24 136.49-21 144-45 174c0 0-54-130.49-114-183s-148.5-76.5-148.5-76.5z"
              fill="#FFBD7B"
              p-id="4471"
            ></path>
            <path
              d="M821 317.31c-43.83-44-100.87-68.86-152.22-83 117.9 37.69 185.67 116.44 198.62 197 20.19 125.6-30.07 269-118.83 371.69C784.5 824.7 811 835.31 811 835.31s231.85-295.53 10-518z"
              fill="#F4A660"
              p-id="4472"
            ></path>
            <path
              d="M373.39 223.48s-150-207-255-207S32.9 213 32.9 213l24 79.5 9 84L112.4 495s27-96 85.5-165 175.49-106.52 175.49-106.52z"
              fill="#FFBD7B"
              p-id="4473"
            ></path>
            <path
              d="M665.4 583.31m-24.5 0a24.5 24.5 0 1 0 49 0 24.5 24.5 0 1 0-49 0Z"
              fill="#FFFFFF"
              p-id="4474"
            ></path>
            <path
              d="M764.4 272.31s73-119 110-99-30 166-30 166z"
              fill="#FF7B7B"
              p-id="4475"
            ></path>
            <path
              d="M358.4 581.81m-24.5 0a24.5 24.5 0 1 0 49 0 24.5 24.5 0 1 0-49 0Z"
              fill="#FFFFFF"
              p-id="4476"
            ></path>
            <path
              d="M465.4 830.31l22-10h56l24 23-13 73-78 6-18-71 7-21zM260.89 268.47s-87-123-120-100.49 33 159 34.5 166.49 85.5-66 85.5-66z"
              fill="#FF7B7B"
              p-id="4477"
            ></path>
            <path
              d="M980.21 60.68c-14.9-30.16-35.09-51.62-55.39-58.89C897.41-8 820.7 22.86 744.55 89.88c-53.16 46.78-89.72 99.67-102.55 119.53-40.92-9.82-84.51-14.79-130-14.79s-89.07 5-130 14.79c-12.84-19.87-49.39-72.75-102.55-119.53C203.3 22.86 126.59-8 99.19 1.78c-20.31 7.27-40.5 28.74-55.4 58.9C25.84 97 16.55 144.08 16.92 196.81c0.13 19 7.16 39.13 14.61 60.4 9.27 26.49 18.86 53.88 17.41 83.21-3.41 69 40.72 148.33 50.88 165.62a399.21 399.21 0 0 0-2.51 45.15c0 56.2 10.9 113.39 32.39 170a537 537 0 0 0 88.15 151.3c38.64 46.4 82.87 83.15 131.48 109.25C401.57 1009.78 456.3 1024 512 1024s110.43-14.22 162.67-42.27c48.61-26.1 92.84-62.85 131.48-109.25a537 537 0 0 0 88.15-151.3c21.49-56.6 32.39-113.79 32.39-170a399.19 399.19 0 0 0-2.51-45.18c10.16-17.28 54.3-96.62 50.88-165.62-1.45-29.34 8.14-56.73 17.41-83.21 7.44-21.27 14.47-41.35 14.61-60.4 0.37-52.69-8.92-99.77-26.87-136.09zM78.9 341.9c1.74-35.19-9.31-66.76-19.06-94.61-6.6-18.84-12.82-36.64-12.92-50.7-0.77-108.5 41.54-159 62.26-166.53 9.55-2.31 70.88 12.32 150.45 82.33 44 38.69 76.53 82.8 91.87 105.37A423 423 0 0 0 267.24 254c-10.34-15.84-30.41-45.63-45.89-62.56-23.84-26.07-61-50.89-87.28-35-11.7 7.08-17.49 23.78-17.21 49.65a214.24 214.24 0 0 0 11.43 64.61c11 31.88 27.7 61.34 34.87 73.28a317 317 0 0 0-54.58 114C94.15 427.21 76.94 381.56 78.9 341.9z m104.8-22.36c-7.68-13.64-19.15-35.72-27-58.63a186.94 186.94 0 0 1-9.7-51.24c-0.68-17.17 2-25.58 3.28-27.89 6.7-2.49 28.59 7.61 49 29.88 13.77 15.07 32.58 42.94 42.55 58.18q-11.25 7.67-21.75 16.06a335.35 335.35 0 0 0-36.37 33.64z m599.4 533.74C707.53 944 611.25 994 512 994s-195.53-50-271.1-140.72c-72.19-86.69-113.59-196.8-113.59-302.08 0-225.6 193.21-326.58 384.69-326.58s384.69 101 384.69 326.58c0 105.28-41.4 215.39-113.59 302.08zM804 285.91q-10.5-8.39-21.75-16.06c10-15.24 28.78-43.12 42.55-58.18 20.36-22.27 42.26-32.37 49-29.88 1.32 2.31 4 10.72 3.28 27.89a186.9 186.9 0 0 1-9.7 51.24c-7.89 22.91-19.36 45-27 58.63A335.34 335.34 0 0 0 804 285.91z m173.07-89.31c-0.1 14.06-6.33 31.85-12.92 50.7-9.75 27.85-20.8 59.41-19.06 94.61 2 39.66-15.24 85.31-29.68 116.09a317 317 0 0 0-54.58-114c7.17-11.95 23.9-41.41 34.87-73.28a214.31 214.31 0 0 0 11.43-64.61c0.29-25.87-5.5-42.57-17.21-49.65-26.28-15.89-63.44 8.93-87.28 35-15.48 16.93-35.55 46.72-45.89 62.56a423 423 0 0 0-84.26-36.21c15.33-22.57 47.9-66.68 91.87-105.37 79.56-70 140.88-84.65 150.45-82.33 20.73 7.51 63.03 57.98 62.26 166.49z"
              fill="#192B3A"
              p-id="4478"
            ></path>
            <path
              d="M530.32 804.32h-36.64c-24.91 0-46 16.58-51.39 40.32a51 51 0 0 0-0.79 17.18l3.2 27.22c0.13 1.11 0.29 2.18 0.47 3.21 6.12 33.78 22.22 48.84 52.21 48.84h29.23c30 0 46.09-15.06 52.2-48.83 0.18-1 0.34-2.05 0.47-3.2l3.2-27.23a51 51 0 0 0-0.79-17.19c-5.33-23.75-26.46-40.32-51.37-40.32z m22.38 54l-3.2 27.22c-0.06 0.52-0.13 1-0.2 1.36-4.18 23.06-11 24.18-22.68 24.18h-29.23c-11.69 0-18.51-1.12-22.68-24.17q-0.11-0.61-0.2-1.37l-3.2-27.23a21.13 21.13 0 0 1 0.26-7.09c2.24-10 11.33-16.9 22.12-16.9h36.63c10.78 0 19.88 6.95 22.12 16.9a21.12 21.12 0 0 1 0.26 7.09zM358.3 555.26a48.07 48.07 0 1 0 48.07 48.07 48.07 48.07 0 0 0-48.07-48.07z m0 42.9a18.61 18.61 0 1 1 18.7-18.6 18.66 18.66 0 0 1-18.7 18.61zM665.7 555.26a48.07 48.07 0 1 0 48.07 48.07 48.07 48.07 0 0 0-48.07-48.07z m0 42.9a18.61 18.61 0 1 1 18.71-18.61 18.66 18.66 0 0 1-18.71 18.62z"
              fill="#192B3A"
              p-id="4479"
            ></path>
          </svg>
        </div>
        <div class="inp_img2">
          <svg
            t="1666871506659"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3862"
            width="16"
            height="16"
          >
            <path
              d="M938.64603 886.273219l-173.071777-173.074847c53.665247-63.987337 86.075401-146.400325 86.075401-236.446154 0-203.406666-164.895561-368.298134-368.301204-368.298134-203.409736 0-368.302227 164.892491-368.302227 368.298134 0 203.409736 164.892491 368.302227 368.302227 368.302227 89.246627 0 171.055864-31.767518 234.798631-84.579327l173.148525 173.148525c1.576915 1.576915 8.15575-2.443655 14.6957-8.979512l23.675212-23.675212C936.205445 894.428969 940.222945 887.850134 938.64603 886.273219zM483.347426 778.093381c-166.425404 0-301.338093-134.912689-301.338093-301.338093s134.912689-301.338093 301.338093-301.338093S784.685519 310.329884 784.685519 476.755288 649.773853 778.093381 483.347426 778.093381z"
              p-id="3863"
              fill="#cdcdcd"
            ></path>
          </svg>
        </div>
        <input type="text" placeholder="搜索哇" @click="sou" v-model="val" />
      </div>
    </div>
    <div class="right">搜索</div>
  </div>
</template>

<script>
export default {
  props: ["name1"],
  data() {
    return {
      name: "未登录",
      val: null,
    };
  },
  created() {
    //登录状态
    this.$bus.$on("chai", (res) => {
      this.name = "";
    });
    if (sessionStorage.getItem("userid")) {
      this.name = "";
    }
  },
  methods: {
    //搜索
    sou() {
      this.$emit("fanhui", 1);
      this.$router.push({ name: "sousuo" });
    },
  },
  watch: {
    val() {
      this.$bus.$emit("sou", this.val);
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  height: 0.44rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 0.15rem;
  box-sizing: border-box;
  background: #f4f4f4;
  overflow: hidden;
  > .left {
    width: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  > .center {
    flex: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    > .inp {
      width: 100%;
      height: 30px;
      border-radius: 22px;
      background: white;
      display: flex;
      align-items: center;
      > .inp_img1 {
        width: 20px;
        height: 15px;
        padding-left: 4%;
        padding-right: 2%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      > .inp_img2 {
        width: 20px;
        height: 15px;
        padding-left: 1%;
        border-left: 1px solid #ccc;
        img {
          width: 100%;
          height: 100%;
        }
      }
      > input {
        border: none;
        font: 0.12rem;
      }
    }
  }
  > .right {
    width: 0.64rem;
    height: 0.3rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #fcdce1;
    border-radius: 55px;
    position: absolute;
    right: 10px;
  }
}
</style>